<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title></title>
	</head>

	<body>
		<!--多行列表-->
		<script type="text/x-template" id="ly-table-script">
			<div>
				<table>
					<thead style="display: block;width: 100%;">
						<tr>
							<td v-for="(item, index) in thead" :style="{ width: item.width + 'rem'}">{{ item.name }}</td>
						</tr>
					</thead>
					<tbody style="display: block;height: 50vh; overflow: auto;width: 100%;">
						<tr v-for="(itemTR, indexTR) in tbody">
							<td v-if="thead[index]" v-for="(item, index) in tbody[indexTR]" :style="{ width: thead[index].width + 'rem '}">
								<button v-if="thead[index].type == 'button'" @click="clickButton(tbody[indexTR], indexTR)">{{ thead[index].button }}</button>
								<span v-else>{{ item }}</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</script>
		<div id="app">
			<ly-table v-bind:ly-table="data" v-on:lybutton="buttonSup"></ly-table>
		</div>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('ly-table', {
				template: '#ly-table-script',
				props: ['lyTable'],
				data: function() {
					return {
						thead: this.lyTable.thead,
						tbody: this.lyTable.tbody
					}
				},
				methods: {
					clickButton: function(item, index) {
						this.$emit('lybutton', item, index);
					}
				}
			})
			var LYTbaleModel = function() {
				this.thead; //头部数组 
				this.tbody;
			}
			var data = new LYTbaleModel()
			data.thead = {
				ly1: {
					name: '西湖好',
					width: '60',
					type: 'span'
				},
				ly3: {
					name: '西湖好2',
					width: '100'
				},
				ly4: {
					name: '西湖好3',
					width: '80',
					type: 'button',
					button: '同意'
				}
			}
			data.tbody = [{
					ly1: '内容1',
					ly2: '内容2',
					ly3: '内容3',
					ly4: '内容4'
				},
				{
					ly1: '内容1',
					ly2: '内容2',
					ly3: '内容3',
					ly4: '内容4'
				},
				{
					ly1: '内容1',
					ly2: '内容2',
					ly3: '内容3',
					ly4: '内容4'
				},
				{
					ly1: '内容1',
					ly2: '内容2',
					ly3: '内容3',
					ly4: '内容4'
				},
				{
					ly1: '内容1',
					ly2: '内容2',
					ly3: '内容3',
					ly4: '内容4'
				},
				{
					ly1: '内容1',
					ly2: '内容2',
					ly3: '内容3',
					ly4: '内容4'
				},
			]

			new Vue({
				el: '#app',
				data: {
					data: data
				},
				methods: {
					buttonSup: function(item, index) {
						console.log('父标签可以了');
						console.log(JSON.stringify(item));
						console.log(index);
					}
				}
			})
		</script>
	</body>

</html>